<template>
  <div>
    <el-button type="primary" @click="newUserFlag = true" style="margin-bottom: 25px">新建路由</el-button>
    <el-dialog title="新建路由" :visible.sync="newUserFlag" width="50%">
      <addPermission ref="mychild"></addPermission>
    </el-dialog>
    <el-table :row-style="rowStyle" :data="tableData" border>
      <el-table-column prop="id" label="路由ID"></el-table-column>
      <el-table-column prop="permissionName" label="路由名称"></el-table-column>
      <el-table-column prop="webUrl" label="路由地址"></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="pzUser(scope.row)" type="primary" size="small">修改路由</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      style="float: right;margin: 20px 50px;"
      :total="page.tatol"
    ></el-pagination>

    <el-dialog title="修改路由" :visible.sync="routeFlag" width="30%">
      <el-row>
        <el-col :span="24">
          <h3>路由名称:</h3>
        </el-col>
        <el-col :span="24">
          <el-input v-model="pzUserMsg.permissionName" placeholder="请输入内容" style="width: 300px"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <h3>路由描述:</h3>
        </el-col>
        <el-col :span="24">
          <el-input
            v-model="pzUserMsg.description"
            placeholder="请输入内容"
            style="width: 300px"
            type="textarea"
            :rows="2"
          ></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <h3>路由地址:</h3>
        </el-col>
        <el-col :span="24">
          <el-input v-model="pzUserMsg.webUrl" placeholder="请输入内容" style="width: 300px"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <h3>上级路由Id:</h3>
        </el-col>
        <el-col :span="24">
          <el-input v-model="pzUserMsg.pid" placeholder="请输入内容" style="width: 300px"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <h3>后端权限:</h3>
        </el-col>
        <el-col :span="24">
          <el-input v-model="pzUserMsg.permissionPath" placeholder="请输入内容" style="width: 300px"></el-input>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="routeFlag = false">取 消</el-button>
        <el-button type="primary" @click="getNewRote">修 改</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import { Message } from 'element-ui'
import addPermission from '@/components/addPermission'
export default {
  data () {
    return {
      tableData: [],
      page: {
        pageSize: 10,
        pageNo: 1,
        tatol: 0
      },
      pzUserMsg: {
        id: '',
        permissionName: '',
        description: '',
        webUrl: '',
        permissionPath: '',
        permissionType: 1,
        pid: 0,
        sortNum: 0,
        isDelete: 0
      },
      routeFlag: false,
      newUserFlag: false
    }
  },
  components: {
    addPermission: addPermission
  },
  methods: {
    handleSizeChange (val) {
      this.page.pageSize = val
      this.search()
    },
    handleCurrentChange (val) {
      this.page.pageNo = val
      this.search()
    },
    search () {
      request({
        url: '/admin/permission/findPermissionByPage',
        method: 'get',
        params: {
          pageNo: this.page.pageNo,
          pageSize: this.page.pageSize
        }
      }).then(res => {
        if (res.code === '00000000') {
          this.tableData = res.data.data
          this.page.tatol = parseInt(res.data.totalCount)
        }
      })
    },
    rowStyle (row) {
      // console.log(row)
      if (row.rowIndex % 2 === 0) {
        return 'background: #ccc'
      }
    },
    pzUser (row) {
      this.pzUserMsg = row
      this.routeFlag = true
    },
    getNewRote () {
      request({
        url: '/admin/permission/updatePermission',
        method: 'post',
        data: {
          id: this.pzUserMsg.id,
          permissionName: this.pzUserMsg.permissionName,
          description: this.pzUserMsg.description,
          webUrl: this.pzUserMsg.webUrl,
          permissionPath: this.pzUserMsg.permissionPath,
          permissionType: this.pzUserMsg.permissionType,
          pid: this.pzUserMsg.pid,
          sortNum: 0,
          isDelete: 0
        }
      }).then(res => {
        if (res.code === '00000000') {
          Message({
            message: res.message,
            type: 'success',
            duration: 5 * 1000
          })
          this.search()
          this.routeFlag = false
        } else {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
        }
      })
    }
  },
  watch: {
    routeFlag (val) {
      if (!val) {
        this.pzUserMsg = {
          id: '',
          permissionName: '',
          description: '',
          webUrl: '',
          permissionPath: '',
          permissionType: 1,
          pid: 0,
          sortNum: 0,
          isDelete: 0
        }
        this.search()
      }
    },
    newUserFlag (val) {
      if (!val) {
        this.$refs.mychild.remove()
        this.search()
      }
    }
  },
  created () {
    this.search()
  }
}
</script>

<style>
.el-dialog__footer {
  text-align: center;
}
</style>
